<template>
  <div class="pages-container">
    <div class="tophead b f30 row baseline relative">
      <div class="ctheme">欢迎进入</div>
      <div class="cfff">{{ this.$store.state.title.name.welcome }}</div>
      <div class="ctheme f16 ml5">/</div>
      <div class="ml20 f14 fw400" style="color: #7d868f">Welcome To Smart Community 4.0 !</div>
      <div class="row-reverse abs acen pointer" style="right: 28px">
        <el-dropdown @command="handleCommand" trigger="click">
          <div class="el-dropdown-link row acen">
            <div style="margin-right: 5px; color: #bfccd9" class="f14">金马小区</div>
            <img style="width: 26px" src="@/assets/imgs/4/icon-mine.svg" />
          </div>
          <el-dropdown-menu class="cen" slot="dropdown">
            <el-dropdown-item v-for="(item, idx) in menuList" :command="item.command" :key="idx">
              {{ item.name }}
              <div v-if="idx < menuList.length - 1" class="row jcen w100">
                <div class="line"></div>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <img style="width: 26px; margin-right: 5px" src="@/assets/imgs/4/icon-renovate.svg" />
      </div>
    </div>
    <img style="margin: 12px 0 0 28px" src="@/assets/imgs/4/line.svg" />
    <div class="contain row">
      <!-- 左侧 -->
      <div class="leftContain mt32">
        <div class="title fw500">人口数量分布</div>
      </div>
      <!-- 主体 -->
      <div class="centerContain mt40">
        <div class="menuBox row w100 jcen">
          <div
            v-for="(item, idx) in menuBoxList"
            :key="idx"
            class="relative pointer"
            @click="goRouter(item.route)"
          >
            <img :src="item.icon" class="imgItem" :class="idx === 0 ? 'ml51' : 'ml20'" />
            <div class="abs nameItem">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import scroller from "./comments/scroller.vue";
import scroll from "./comments/scroll.vue";
import Sex from "./comments/sex";
import Age from "./comments/age";
import Statist from "./comments/statist";
import StatistToday from "./comments/statistToday";
import Contrast from "./comments/contrast";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    scroll,
    scroller,
    Sex,
    Age,
    Statist,
    Contrast,
    StatistToday,
    vueSeamlessScroll
  },
  data() {
    return {
      listData: [],
      villOne: "",
      villfitList: [],
      size: "20%",
      drawer: false,
      loading: false,
      villageList: [],
      changVul: true,
      //当前选中的小区
      currentName: "",
      menuList: [
        {
          name: "切换小区",
          command: "changeCID"
        },
        {
          name: "帮助中心",
          command: "help"
        },
        {
          name: "退出",
          command: "out"
        }
      ],
      menuBoxList: [
        {
          name: "首页",
          icon: require("@/assets/imgs/4/kuang-home.png"),
          route: "/personnel/Population"
        },
        {
          name: "通行记录",
          icon: require("@/assets/imgs/4/kkuang-tongxing.png"),
          route: "/personnel/Population"
        },
        {
          name: "人员审核",
          icon: require("@/assets/imgs/4/kuang-shenhe.png"),
          route: "/personnel/Population"
        },
        {
          name: "数据大屏",
          icon: require("@/assets/imgs/4/kuang-shuju.png"),
          route: "/personnel/Population"
        }
      ],
      // 人员统计
      perTotal: [
        { name: "住户", value: "0000" },
        { name: "租户", value: "0000" },
        { name: "服务人员", value: "0000" },
        { name: "从业人员", value: "0000" },
        { name: "访客", value: "0000" },
        { name: "陌生人", value: "0000" }
      ],
      // 房屋统计
      houTotal: [
        { name: "自住", value: "0000" },
        { name: "租户", value: "0000" },
        { name: "闲置", value: "0000" }
      ],
      // 小区总数
      villTotal: "0000",
      houseTotal: "0000",
      price: "500000000",
      todayAccount: "",
      totalAccount: "",
      infoNumber: "",
      dataCount: {},
      // 昨天
      yesterCount: {},
      ydata: [0, 0, 0, 0, 0, 0, 0],
      zdata: [0, 0, 0, 0, 0, 0, 0],
      CID: "",
      timer: "",
      examNumber: "",
      offline_total: "",
      online_total: "",
      device_total: "",
      eqiment: [],
      statetotal: "",
      GidageList: [],
      citylist: []
    };
  },

  watch: {
    villOne(val, oldval) {
      if (val) {
        this.villfitList = this.villageList.filter((item) => {
          if (item.name.includes(val)) {
            return item;
          }
        });
      } else {
        this.villfitList = this.villageList;
      }
    }
  },
  created() {
    // 每次进入页面 先看看是否已经选择过小区 如果选择过 就直接加载这个选择的小区数据
    let cid = window.localStorage.getItem("home_CID");
    if (cid) this.CID = cid;
  },
  methods: {
    goRouter(r) {
      this.$router.push({
        path: r
      });
    },

    gohouse() {
      this.$router.push({
        path: "/personnel/OneHousehold"
      });
    },
    clearInp() {
      this.villfitList = this.villageList;
    },
    getDetailsV(val, name) {
      this.CID = val;
      window.localStorage.setItem("home_CID", this.CID);

      if (name) this.currentName = name;
      this.timer = new Date().getTime();
      this.drawer = false;
      this.getInfoNum();
      this.getData();
      this.getBuild();
      this.getBtype();
      this.getExamNum();
    },
    allVillage() {
      this.CID = "";
      this.timer = new Date().getTime();
      this.drawer = false;
      this.getInfoNum();
      this.getData();
      this.getBuild();
      this.getBtype();
      this.getExamNum();
    },
    //刷新页面
    goback() {
      // this.goTranfic();
      this.getDetailsV(this.CID);
    },
    // 小区查询
    // getCommList() {
    //   this.GidageList = this.$store.state.village.villageList;
    // },
    //设备列表
    getEqiment() {
      this.$api.build.sys_device_events_list().then((res) => {
        if (res.code == 0) {
          this.offline_total = res.offline_total;
          this.online_total = res.online_total;
          this.device_total = res.device_total;
          this.eqiment = res.data;
          this.eqiment.map((item) => {
            if (item.days < 0) {
              item.outday = item.days;
              console.log(item.outday);
            }
          });
        }
      });
    },
    //异常列表
    getdanger() {
      this.$api.build.warning_list().then((res) => {
        if (res.code == 0) {
          this.statetotal = res.count;
          this.citylist = res.not_push_communityArr;
          this.citylist.map((item) => {
            this.GidageList.map((val) => {
              if (item._id.CID == val.CID) {
                item.name = val.name;
              }
            });
          });
        }
      });
    },
    getCommunityList() {
      this.$api.build.communityName().then((res) => {
        if (res.code == 0) {
          this.villageList = res.data;
          this.villfitList = this.villageList;
          this.$store.commit("setvillage", res.data);
          // 判断是否存在 CID
          if (this.CID) {
            // 判断是否存在改CID的小区
            let obj = this.villfitList.find((v) => {
              return v.CID == this.CID;
            });
            // 加载该小区数据
            if (obj) this.getDetailsV(this.CID, obj.name);
          }
        }
      });
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#3f5c6d2c;";
    },
    toeqpage() {
      this.$router.push({ path: "/resource/AddEquipment" });
    },
    getData() {
      var param = {
        CID: this.CID
      };
      var params = JSON.stringify(param);
      this.loading = true;
      this.$api.dataSc
        .people_type(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.perTotal = res.data;
            // this.perTotal.map(item => {
            //   if (item.name == "其他") {
            //     item.name = "境外人员";
            //   }
            // });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("服务器连接失败请重试" + err);
        });
    },
    getBuild() {
      var param = {
        CID: this.CID
      };
      var params = JSON.stringify(param);
      this.loading = true;
      this.$api.dataSc
        .buildings_num(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.villTotal = res.comunities;
            this.houseTotal = res.count;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("服务器连接失败请重试" + err);
        });
    },
    getBtype() {
      var param = {
        CID: this.CID
      };
      var params = JSON.stringify(param);
      this.loading = true;
      this.$api.dataSc
        .house_type(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.houTotal = res.echart.data;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("服务器连接失败请重试" + err);
        });
    },

    handleCommand(command) {
      this.$message("click on item " + command);
    },

    // 推送异常
    getInfoNum() {
      let param = {
        CID: this.CID
      };
      this.$api.three.getInforNum(param).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.infoNumber = res.data.count;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    // 待审核数量
    getExamNum() {
      let that = this;
      let param = {
        auditType: 2,
        auditStatus: "",
        limit: 1,
        page: 1,
        CID: this.CID
      };
      this.$api.personnel.queryList(param).then((res) => {
        if (res.code == 0) {
          that.examNumber = res.count;
        } else {
          this.$message({
            message: "操作失败, " + res.Msg,
            type: "error"
          });
        }
      });
    },
    //获取小区的列表选择器
    getcityList() {
      let params = {};
      params = {
        where: {
          CODES: []
        }
      };
      let param = JSON.stringify(params);
      this.loading = true;
      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.GidageList = res.data;
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    goHome() {
      this.$router.push({ path: "/" });
    },
    goTranfic() {
      this.$router.push({ path: "/pass/PersonPass" });
    },
    goPerCheck() {
      this.$router.push({ path: "/pass/Approval" });
    },
    goWarning() {
      // this.$router.push({ path: "/information/Warning" });
      this.$router.push({ path: "/information/Aipower" });
    },
    lookList() {
      window.localStorage.setItem("home_CID", "");
      this.CID = "";
      this.currentName = "";
      this.drawer = false;
      this.timer = new Date().getTime();
      this.getInfoNum();
      this.getData();
      this.getBuild();
      this.getBtype();
      this.getExamNum();
    }
  },
  mounted() {
    this.getcityList();
    this.getdanger();
    this.getInfoNum();
    this.getExamNum();
    this.getData();
    this.getBuild();
    this.getBtype();
    // this.getCommList()
    this.getCommunityList();
    this.getEqiment();
  }
};
</script>

<style scoped lang="scss">
.pages-container {
  background: url("~@/assets/imgs/4/bg.png") no-repeat;
  background-size: cover;
  color: #93ceff;
  // overflow-x: hidden;
  box-sizing: border-box;
  // overflow-y: auto;
  overflow: hidden;
  padding: 0 !important;
  height: 100%;
}
::-webkit-scrollbar {
  width: 10px;
  height: 1px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}

.tophead {
  padding: 28px 0 0 28px;
  box-sizing: border-box;
  h4 {
    font-size: 18px;
    padding: 15px;
  }
}

/deep/.el-dropdown-menu {
  background-color: #082647;
  border: none;
  color: #bfccd9;
}
/deep/.el-dropdown-menu__item {
  color: inherit;
}

.line {
  width: 60px;
  height: 1px;
  background: #ffffff;
  opacity: 0.09;
}
.leftContain {
  width: 474px;
}
.centerContain {
  width: 964px;
}
.right {
  width: 474px;
}
.contain {
  width: 100%;
  .imgItem {
    width: 202px;
    height: 82px;
  }
  .nameItem {
    right: 16px;
    top: 0px;
    line-height: 82px;
    font-size: 28px;
    font-weight: 500;
    color: #f9f9fa;
  }
  .title {
    background-image: url("~@/assets/imgs/4/title_bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.ml51 {
  margin-left: 51px;
}
</style>
